/*
*我的理财——理财转换
*
*/

<style scoped lang="less">
    @import '../../../assets/css/reset.css';
    @orange : #FF6633;
    @gary:#999999;

    .orange{
        color: @orange;
    }

    .pad30px {
        padding: 0px .3rem;
    }
  .mangement{
      width: 100%;
      height: 13.14rem;
      background: #f7f8fa;
      .title{
          line-height: .8rem;
          .pad30px
      }
      .flexBox{
          background: #fff;
          overflow: hidden;
          .secTitle{
              margin: .32rem 0px;
          }
          .top{
              font-size: .3rem;
              padding-bottom: .16rem;
          }
          .down{
              font-size: .25rem;
              color: @gary;
              padding-bottom: .36rem;
          }
          .pad30px
      }
      .mangeLot{
          height: 1.18rem;
          padding-left: .3rem;
      }
      .MSnumber{
          height: .8rem;
          padding-left: .3rem;
      }
      .checker{
          position: absolute;
          top: .34rem;
          right: .3rem;
          .typeChunk {
              width: .88rem;
              line-height: .48rem;
              text-align: center;
              border: 1px solid #ccc;
              font-size: .25rem;
              color: #EC1B30;
              border-radius: .04rem;
          }
          .typeChunk-selected {
              outline: none;
              background:#EC1B30;
              color: white;
          }
      }
      .sure{
          line-height:0.88rem;
          width:6.9rem;
          margin-left: 0.3rem;
          margin-top: 0.49rem;
          background: #EC1B30;
          font-size: 0.3rem;
          border-radius: 0.06rem;
          color: white;
      }
      .deal{
          margin-top: 0.48rem;
          margin-bottom: 0.45rem;
          padding-left: 0.3rem;
          overflow: hidden;
          .select{
              float: left;
              width: 0.28rem;
              height: 0.28rem;
              border: 1px solid #bfbfbf;
              margin-right:0.21rem;
              vertical-align: middle;
              &>img{
                  width: 100%;
                  height: auto;
              }
          }
          &>p{
              float: left;
              width:6.43rem;
              font-size:0.22rem;
              line-height: 0.35rem;
              color: #ccc;
              .dealCheck{
                  color: #3333ff;
                  text-decoration: none;
                  font-size:0.22rem;
              }
          }
          &>i{
              float: left;
              margin-left: 0px;
              margin-right: 0.15rem;
              &>img{
                  vertical-align: top;
                  width: 100%;
                  height: auto;
              }
          }
      }
      .flag{
          width: 100%;
          height: 100%;
          &>h2{
              line-height: 0.86rem;
              font-size: .28rem;
              font-weight:normal;
              border-bottom: 1px solid #EAEAEA;
          }
          p{
              width: 5.18rem;
              height: 3.89rem;
              font-size: 0.26rem;
              margin: 0.44rem auto 0.71rem;
              text-align: left;
          }
          .flagBtn{
              display: inline-block;
              width: 2rem;
              line-height: 0.7rem;
              margin:0px 0.35rem;
              font-size: .28rem;
              color: #EC1B30;
              border-color: #EC1B30;
              background-color: transparent;
              border-radius:.04rem;
              &.selected{
                  background: #EC1B30;
                  color: white;
              }
          }
      }
  }
</style>

<template>
    <div class="mangement">
        <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true}" @on-click-back="back" @on-click-more="showMenus = true">转入</x-header>
        <p class="title">转出产品</p>
        <div class="flexBox">
            <p class="secTitle">{{repord.OutProd_Name}}</p>
            <flexbox>
                <flexbox-item><div><p class="top orange">{{repord.OutClearNum}}</p><p class="down">净值</p></div></flexbox-item>
                <flexbox-item><div><p class="top ">{{repord.OutTurnDeal}}</p><p class="down">可转份额</p></div></flexbox-item>
                <flexbox-item><div><p class="top ">{{repord.OutMarketReal}}</p><p class="down">市值</p></div></flexbox-item>
            </flexbox>
        </div>
        <p class="title">转入产品</p>
        <div class="flexBox">
            <p class="secTitle">{{repord.InProd_Name}}</p>
            <flexbox>
                <flexbox-item :span="4"><div><p class="top orange">{{repord.InClearNum}}</p><p class="down">净值</p></div></flexbox-item>
                <flexbox-item><div><p class="top ">{{repord.InTurnDeal}}</p><p class="down">可转份额</p></div></flexbox-item>
            </flexbox>
        </div>
        <p class="title">转换份额</p>
        <group>
            <x-input title="" placeholder="请输入转换份额" class="mangeLot">
            </x-input>
            <x-input title="" placeholder="请输入客户经理编号(选填）" class="MSnumber"></x-input>
            <checker v-model="typeChunk" default-item-class="typeChunk" selected-item-class="typeChunk-selected" class="checker">
                    <checker-item value="one">
                    全部
                    </checker-item>
                    <checker-item value="two">
                    1/2
                    </checker-item>
                    <checker-item value="three">
                    1/3
                    </checker-item>
            </checker>
        </group>

        <div class="deal">
            <i class='select' @click='dealClick'><img src="../../../assets/img/Financial/selected.png" alt="" v-show="deal"></i>
            <p>本人已阅读同意<a href="javascript:void(0)" class="dealCheck">《风险提示书》</a>相关声明及条款内容充分了解并愿 意承担本产品得相关风险。</p>
        </div>

        <x-button type="default" class="sure" @click.native="flag = 1">确认</x-button>
        <x-dialog v-model="flag" :dialog-style="{'max-width': '6.3rem', height: '7.28rem'}">
            <div class="flag">
                <h2>确认提示</h2>
                <p>本产品为非保本浮动收益型理财产品，我行并不承诺您得本今安全和收益保障，您得本金将可能受到市场变动等因素的影响而蒙受损失。我行代客境外理财产品交易时间为周一至周五上午8：30-11：00，节假日以及产品特殊非工作日除外。当前处于交易时段外，我行仍将接受您得交易申请，并将在下一个交易日受理，交易结果将以我行最终确认为准。您确定是否仍将继续交易？</p>
                <div><button  class="flagBtn" :class="{selected:cancel == 1}" @click="onCancel">取消</button><button class="flagBtn" :class="{selected:right == 1}" @click="onRight">确定</button></div>
            </div>
        </x-dialog>
    </div>
</template>

<script>
/* eslint-disable indent */

export default{
  data () {
    return {
      repord: {
        OutClearNum: null, // 转出净值
        OutTurnDeal: null, // 转出可转份额
        OutMarketReal: null, // 转出市值
        InProd_Name: '', // 转入产品名
        OutProd_Name: '', // 转出产品名
        InClearNum: '', // 转入净值
        InTurnDeal: '' // 转入可转份额
      },
      typeChunk: '',
      deal: 0, // 控制勾选框
      flag: 0, // 控制弹层显隐
      right: 1,
      cancel: 0,
      success: '0'
    }
  },
  methods: {
    dealClick: function () { // 勾选框显示事件
        let n = this.deal
        if (n === 1) {
            this.deal = 0
        } else {
            this.deal = 1
        }
    },
    onCancel: function () { // 弹层取消按钮点击事件
        let n = this.cancel
        n === 1 ? this.cancel = 0 : this.cancel = 1
        this.flag = 0
    },
    onRight: function () { // 弹层确定按钮点击事件
        let n = this.right
        n === 1 ? this.right = 0 : this.right = 1
        this.flag = 0
        this.$router.push({name: 'FinancialTransformNoteVerify'})
    },
    back () {
      this.$router.isBack = true
      this.$router ? this.$router.back() : window.history.back()
      // console.log(this.$router.isBack)
    },
    refreshTest: function () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'MyFinancialMange', 'user_Data': {'CurrencyType': '00014', 'CapitalPrd': '0987677'}}}),
        function (response) {
          _this.success = response.data.status
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.repord = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>
<style>
    #vux-x-input-ibmgi::-webkit-input-placeholder{
        color:#ccc;opacity:1;font-size:.29rem;
    }
    #vux-x-input-stj8n::-webkit-input-placeholder{
        color:#ccc;opacity:1;font-size:.25rem;
    }
</style>
